/* Page Layout */
body {
    background-color: #F4F4F4;
    font-family: Arial, sans-serif;
}

header, footer {
    text-align: center;
}

#out-of-date, #notice, #loading, #tasks, #task-list, #nothing, #modal-overlay, #modal { display: none; }
#loading { float: left; }
#options { float: right; }

/* Global Styles */
hr { border-color: #E9E9E9; }

/* Header */
h1, h2 { margin: 0; }
h1 { font-size: 32px; font-weight: bold; }
h2 { font-size: 16px; font-weight: normal; }

/* Notes */
.note {
    margin: 10px auto 0px auto;
    padding: 5px;
    width: 60%;
    
    background-color: #D7F0D7;
    
    border: 1px solid #C8E1C8;
    border-radius: 5px;
}

#close-notice {
    float: right;
}

/* Task List */
#tasks {
    margin: 10px auto 0px auto;
    padding: 5px;
    width: 60%;
    
    background-color: white;
    text-align: center;
    
    border: 1px solid #E9E9E9;
    border-radius: 5px;
}

#new-task {
    margin-top: 20px;
}

#no-tasks {
    font-weight: bold;
    font-size: 24px;
}

#task-list {
    margin: 0 auto;
    border-spacing: 0px 3px;
}

tr.running { background-color: #D5F0F0; }
tr.done { background-color: #D7F0D7; }

td.text { border-radius: 5px 0px 0px 5px; }
td.options { border-radius: 0px 5px 5px 0px; }

th.text { width: 30%; }
th.options { width: 20%; }
th.current { width: 15%; }
th.goal { width: 15%; }
th.progress { width: 20%; }

/* Options Modal */
#modal, #modal-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    
    width: 100%;
    height: 100%;
}

#modal-overlay {
    background-color: black;
    opacity: .60;
}

#modal-contents {
    margin: 200px auto;
    overflow: hidden;
    padding: 10px;
    width: 0px;
    height: 0px;
    
    border: 1px solid black;
    border-radius: 10px;
    
    background: #e9f6fd;
    background: -moz-linear-gradient(top, #e9f6fd 0%, #d3eefb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f6fd), color-stop(100%,#d3eefb));
    background: -webkit-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
    background: -o-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
    background: -ms-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f6fd', endColorstr='#d3eefb',GradientType=0 );
    background: linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
}

#modal-buttons { float: right; }
